<template>
  <div style="margin-top: 20px;margin-left: 20px;margin-right: 20px">
    <!--搜索-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>条件搜索</span>
      </div>
      <div class="search">
        <!--搜索框-->
        <el-input
          placeholder="请输入选题名称或指导老师姓名"
          prefix-icon="el-icon-search"
          style="width: 350px"
          v-model="searchKey">
        </el-input>
        <!--搜索按钮-->
        <div class="search-btn">
          <el-button type="primary" @click="SearchTopics()">查询</el-button>
          <el-button type="info" @click="clear()">清空</el-button>
        </div>
      </div>
    </el-card>

    <!--毕业论文表单-->
    <el-card class="box-card" style="margin-top: 20px">
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">

        <el-table-column prop="id" label="ID" width="100" v-if="false" />
        <el-table-column prop="profession" label="面向专业/学生" show-overflow-tooltip />
        <el-table-column prop="title" label="课题名称" show-overflow-tooltip min-width="120" />
        <el-table-column prop="username" label="指导教师" width="80" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="email" label="电子邮箱" min-width="100" />
        <el-table-column prop="source" label="课题来源" />
        <el-table-column prop="type" label="课题类别" />
        <!--<el-table-column prop="topicAchiClass" label="成果类别" />-->
        <el-table-column prop="approach" label="课程完成途径" />
      </el-table>
      <!--分页-->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum">
        </el-pagination>
      </div>
    </el-card>
  </div>

</template>

<script>
import {getAllThesisApi} from "@/api/ThesisApi";

export default {
  name: "SelectTopic",
  data() {
    return {
      searchKey:'',
      tableData:[],
      totalNum: 0,
      currentPage: 1,
      pageSize:20,
      options: [{
        value: '0',
        label: '全部'
      },{
        value: '1',
        label: '未被选'
      },{
        value: '2',
        label: '待审核'
      },{
        value: '3',
        label: '已被选'
      }],
      value: '0'
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllTopics(this.currentPage, this.pageSize)
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllTopics(this.currentPage, this.pageSize)
    },
    getAllTopics(param1, param2) {
      getAllThesisApi({'current': param1, "size": param2}).then(res => {
        this.totalNum = res.data.total
        this.tableData = res.data.records
      })
    },
    SearchTopics() {
      let data = {
        current: this.currentPage,
        size: this.pageSize,
        title: this.searchKey
      }
      getAllThesisApi(data).then(res => {
        this.totalNum = res.data.total
        this.tableData = res.data.records
      })
    },
    clear() {
      this.searchKey = ''
      this.getAllTopics(this.currentPage, this.pageSize)
      this.value='0'
    },
  },
  created() {
    this.getAllTopics(this.currentPage, this.pageSize)
  }
}
</script>

<style scoped>


.search-btn {
  margin-left: 5px;
  display: inline-block;
  float: right;
}
.block {
  margin-top: 10px ;
  width: 100%;
  display:inline-block;
  text-align:center;
}
</style>
